<template>
  <div class="content">
    <div class="content-body">
      <searchbar placeholder = '搜索门店' btnvalue = '搜索'  v-model="searchInfo">
        <mt-cell v-for = '(item, index) in storeList' :key = 'item.storeCode' title="" class="main-title account-border-b">
          <span slot="icon">{{item.storeName}}</span>
          <span class="iconselect" @click = 'activeToggle(index)'>
              <i style='color: #333' v-show="item.selectedFlag === 0" class="iconfont icon-checkbox-unselect"></i>
              <i style='color: #ff6f43' v-show="item.selectedFlag === 1" class="iconfont icon-checkbox-selected"></i>
            </span>
        </mt-cell>
      </searchbar>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import searchbar from '@/common/plugins/searchbar';
  import api from '../../common/api/shopAlter';
  //import loginApi from '@/common/api/login';
  import mintUi from '@/common/mintUi';
  //import {mapMutations, mapActions} from 'vuex';
  import {mapMutations} from 'vuex';

  /**
   * shopAlter
   * @namespace components/shop/searchJurShop
   * @description 门店权限选择页面
   */
  export default {
    data () {
      return {
        'storeList': [],
        'searchInfo': '',
        'allStoreList': []
      };
    },
    methods: {
      //...mapActions({setPermission: 'setPermission'}),
      ...mapMutations({setStore: 'SETSTORE'}),
      choosethisStore (item) {
        mintUi.openToast('成功切换门店!');
        this.setStore(item);
        /*loginApi.getResources(3).then(res => {
          this.setPermission(res);
        });*/
        this.$router.push('/home');
      },
      activeToggle (idx) {
        let that = this;
        if (this.allStoreList.filter(v => v.selectedFlag === 1).length === 1 && this.storeList[idx].selectedFlag === 1) {
          mintUi.openToast('至少保留一家门店');
          return;
        }
        this.storeList[idx].selectedFlag = this.storeList[idx].selectedFlag === 0 ? 1 : 0;
        var activeObj = this.allStoreList.find((v, i) => v.storeCode === this.storeList[idx].storeCode);
        activeObj.selectedFlag = activeObj.selectedFlag === 0 ? 1 : 0;
        let newStoreList = this.allStoreList.filter(val => {
          return val.selectedFlag === 1;
        }).map(val => {
          return val.storeCode;
        });
        let data = {
          storeCodes: newStoreList.length === this.allStoreList.length ? [] : newStoreList,
          phone: that.$route.query.phone
        };
        api.allowedToAccess(data).then(res => {
          mintUi.openToast('保存成功');
          api.getShopList({
            'storeName': '',
            'userName': this.$route.query.phone,
            'groupCode': JSON.parse(sessionStorage.getItem('store')).groupCode
          }).then(res => {
            this.allStoreList = res || [];
          });
        });
      }
    },
    created () {
      api.getShopList(
        {
          'storeName': '',
          'userName': this.$route.query.phone,
          'groupCode': JSON.parse(sessionStorage.getItem('store')).groupCode
        }).then(res => {
        this.allStoreList = res || [];
      });
    },
    activated () {
      api.getShopList(
        {
          'storeName': '',
          'userName': this.$route.query.phone,
          'groupCode': JSON.parse(sessionStorage.getItem('store')).groupCode
        }).then(res => {
        this.allStoreList = res || [];
      });
    },
    watch: {
      searchInfo: function (newQuestion) {
        let that = this;
        var param = {
          'storeName': newQuestion,
          'userName': that.$route.query.phone,
          'groupCode': JSON.parse(sessionStorage.getItem('store')).groupCode
        };
        api.getShopList(param).then(res => { //点击单个选项获取店铺列表api
          this.storeList = res || [];
        });
      }
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'searchbar': searchbar
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';
  .title-Info {
    line-height: px2rem(90px);
    height: px2rem(85px);
    overflow: hidden;
    background: #fafafa;
  }
  .title-left-button {
    text-align: center;
    span {
      font-size: px2rem(38px);
    }
  }
  .title-Middle-input {
    margin-top: px2rem(12px);
    width: 100%;
    height: px2rem(58px);
    line-height: px2rem(60px);
    background-color: #ececec;
    border: none;
    border-radius: px2rem(10px);
    padding-left: 30px;
    box-sizing: border-box;
    outline: none;
  }
  .title-Middle-input-bg {
    line-height: px2rem(92px);
    position: absolute;
    top: 0;
    left: 8px;
    color: #666;
  }
  .title-right-button {
    font-size: px2rem(30px);
    text-align: center;
    color: $theme-color;
  }
  .active {
    background: #fff;
    color: $theme-color;
    &:before {
      background-color: #fff;
    }
  }
  .list-right-btn {
    border: none;
    background-color: $theme-color;
    color: #fff;
    border-radius: px2rem(8px);
    padding: px2rem(8px) px2rem(14px);
  }
  .search-box {
    width: 100%;
    box-sizing: border-box;
    height: px2rem(100px);
    padding: px2rem(15px) px2rem(24px);
    color: #999;
    font-size: px2rem(28px);
    background: #f2f2f2;
    .search-content {
      border-radius: 4px;
      text-align: center;
      line-height: px2rem(64px);
    }
  }
</style>


